<template>
        <el-card shadow="never" style="max-height: 700px; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="广告费:" prop="adv">
                    <el-input @keyup.native="UpNumber" v-model="form.adv" placeholder="请输入广告费" clearable />
                </el-form-item>
                <el-form-item label="商品成本:" prop="product_cost">
                    <el-input @keyup.native="UpNumber" v-model="form.product_cost" placeholder="请输入商品成本" clearable />
                </el-form-item>
                <el-form-item label="物流费用:" prop="logistics">
                    <el-input @keyup.native="UpNumber" v-model="form.logistics" placeholder="请输入物流费用" clearable />
                </el-form-item>
                <el-form-item label="其他消费:" prop="other">
                    <el-input @keyup.native="UpNumber" v-model="form.other" placeholder="请输入其他消费" clearable />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                admin: [{ required: true, message: "请输入运营", trigger: "blur" }],
                site: [{ required: true, message: "请输入店铺", trigger: "blur" }],
                sale: [{ required: true, message: "请输入销售额", trigger: "blur" }],
                amz: [{ required: true, message: "请输入亚马逊其他", trigger: "blur" }],
                plat: [{ required: true, message: "请输入平台费", trigger: "blur" }],
                adv: [{ required: true, message: "请输入广告费", trigger: "blur" }],
                product_cost: [{ required: true, message: "请输入商品成本", trigger: "blur" }],
                logistics: [{ required: true, message: "请输入物流费用", trigger: "blur" }],
                profit: [{ required: true, message: "请输入利润", trigger: "blur" }],
        
            },
            form: { 
                adv:0,
                product_cost:0,
                logistics:0,
                other:0,
            },

        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
        UpNumber(e) {
        // 输入框中只允许输入小数点和数字，小数点后只能跟一位
            e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
        }
    }
}
</script>
